<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>大数据统计</title>
    <link rel="stylesheet" href="/lib/layui/css/layui.css">
    <link rel="stylesheet" href="/lib/slider/jquery.easy_slides.css">
    <link rel="stylesheet" href="/lib/swiper/swiper-3.4.2.min.css">
    <script type="text/javascript" src="/lib/jquery/jquery-1.7.min.js"></script>
    <script type="text/javascript" src="/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="/lib/slider/jquery.easy_slides.js?v=20190429"></script>
    <script type="text/javascript" src="/lib/swiper/swiper-3.4.2.min.js"></script>
    <style>
        html {
            width: 1920px;
            height: 1080px;
        }

        body {
            width: 100%;
            height: 100%;
            background: #1e1f32;
            background: url('/static/images/indexbg.png') no-repeat;
            font-size: 12px;
        }

        .itemBox {
            width: 50%;
            height: 100%;
        }

        .childItem {
            width: 50%;
            height: 50%;
        }

        .textBlue {
            color: #3be0f3;
        }

        .tableClass {
            color: #fff;
            font-size: 12px;
            width: 396px;
            height: 150px;
            margin: 1px 0 0 50px;
            text-align: center;
        }

        .titleClass {
            width: 396px;
            height: 26px;
            line-height: 26px;
            color: #3be0f3;
            margin: 76px 0 0 50px;
        }

        .titleClass .leftTitle {
            width: 72px;
            text-align: right;
            margin-left: 68px;
            display: inline-block;
        }

        .titleClass .rightTitle {
            width: 130px;
            text-align: right;
            margin-left: 36px;
            display: inline-block;
        }

        .childItem {
            position: relative;
            height: 100%;
            overflow: hidden;
        }

        .trBgBlue {
            background: #0b4258;
        }

        thead td {
            height: 24px;
            line-height: 24px;
        }

        .bottom .titleClass {
            margin: 83px 0 0 63px;
        }

        .bottom .titleClass .leftTitle {
            width: 37px;
            text-align: right;
            margin-left: 90px;
            display: inline-block;
        }

        .bottom .tableClass {
            margin: 1px 0 0 63px;
        }

        .itemBox > div.layui-row {
            width: 100%;
            height: 250px;
        }

        #cityQt {
            width: 378px;
            height: 190px;
            margin-top: 68px;
            margin-left: 33px;
        }

        .pieTextBox {
            position: absolute;
            width: 100%;
            height: 100%;
            text-align: left;
            top: 0;
            left: 0;
        }

        .pieTextBox .layui-col-xs6 {
            padding-left: 71px;
        }

        .pieTextBox .layui-row {
            margin-top: 4px;
        }

        .pieTextBox p {
            height: 20px;
            line-height: 20px;
        }

        .echartBox {
            width: 100%;
            height: 100%;
        }

        body > .layui-row {
            height: 540px;
        }

        .barStyle {
            /*width: 690px;*/
            /*height: 385px;*/
            width: 100%;
            height: 100%;
        }

        .slider_circle_10 {
            width: 80%;
            height: 100%;
        }

        div.slider.slider_circle_10 > div:not(.nav_indicators):not(.next_button):not(prev_button) {
            background: url('/static/images/titleBg.png') no-repeat;
            background-size: 100% 100%;
            padding: 28px 10px 0;
            font-size: 18px;
        }

        .zizhi .zizhiNum {
            position: absolute;
            top: 68%;
            left: 41%;
        }

        .swiper-slide {
            background-position: center;
            background-size: cover;
            width: 692px;
            height: 447px;
            margin-top: 70px;
        }

        .cityYj {
            background: url('/static/images/cityYj.png') no-repeat center center;
            background-size: 100%;
        }
    </style>
</head>

<body>
<div class="layui-row">
    <!--左上-->
    <div class="layui-col-xs6 itemBox">
        <!--上部-->
        <div class="layui-row">
            <!--各市强条统计-->
            <div class="layui-col-xs6 childItem">
                <div id="cityQt"></div>
            </div>
            <!--各市项目数量统计-->
            <div class="layui-col-xs6 childItem">
                <p class="titleClass">
                    <span class="leftTitle">2014124</span>
                    <span class="rightTitle">10,000,000</span>
                </p>
                <table class="tableClass">
                    <thead>
                    <tr class="trBgBlue">
                        <td>市/区</td>
                        <td>项目总数</td>
                        <td>已备案数</td>
                    </tr>
                    </thead>
                    <tbody class="projectsMunicipal">
                    <!--<tr>
                        <td>桂林市</td>
                        <td>100144 元</td>
                        <td>98745 元</td>
                    </tr>
                    <tr class="trBgBlue">
                        <td>钦州市</td>
                        <td>100144 元</td>
                        <td>98745 元</td>
                    </tr>
                    <tr>
                        <td>百色市</td>
                        <td>100144 元</td>
                        <td>98745 元</td>
                    </tr>
                    <tr class="trBgBlue">
                        <td>贺州市</td>
                        <td>100144 元</td>
                        <td>98745 元</td>
                    </tr>
                    <tr>
                        <td>贵港市</td>
                        <td>100144 元</td>
                        <td>98745 元</td>
                    </tr>-->
                    </tbody>
                </table>
            </div>
        </div>
        <!--下部-->
        <div class="layui-row">
            <!--各专业强条统计-->
            <div class="layui-col-xs6 childItem bottom">
                <p class="titleClass">
                    <span class="leftTitle">93</span>
                </p>
                <div class="tableClass" style="position:relative;">
                    <div class="pieTextBox">
                        <div class="layui-row professionalStrength" >
                            <!--<div class="layui-col-xs6">
                                <p>轨道交通专业</p>
                                <p>40</p>
                            </div>
                            <div class="layui-col-xs6">
                                <p>勘察专业</p>
                                <p>50</p>
                            </div>-->
                        </div>
                        <!-- <div class="layui-row" style="margin-top: 12px;">
                             <div class="layui-col-xs6">
                                 <p>暖通专业</p>
                                 <p>30</p>
                             </div>
                             <div class="layui-col-xs6">
                                 <p>给排水专业</p>
                                 <p>30</p>
                             </div>
                         </div>
                         <div class="layui-row" style="margin-top:11px;">
                             <div class="layui-col-xs6">
                                 <p>结构专业</p>
                                 <p>20</p>
                             </div>
                             <div class="layui-col-xs6">
                                 <p>建筑专业</p>
                                 <p>20</p>
                             </div>
                         </div>-->
                    </div>
                    <div id="specQt" class="echartBox"></div>
                </div>
            </div>
            <!--各市建筑页投资份额统计-->
            <div class="layui-col-xs6 childItem bottom">
                <p class="titleClass">
                    <span class="leftTitle" style="width: 82px;">2014124</span>
                    <span class="rightTitle" style="width: 95px;margin-left: 32px;">10,000,000</span>
                </p>
                <div class="tableClass" style="position:relative;">
                    <div id="cityTzCount" class="echartBox"></div>
                </div>
            </div>
        </div>
    </div>
    <!--右上-->
    <div class="layui-col-xs6 itemBox zizhi">
        <!--全省企业资质统计-->
        <div class="slider slider_circle_10 provincialQualifications">
            <div>
                <span> 城市及道路照明工程资质二级</span>
                <span class="zizhiNum">57</span>
            </div>
            <div>
                <span>城市及道路照明工程承包一级</span>
                <span class="zizhiNum">541</span>
            </div>
            <div>
                <span>城市及道路照明工程承包三级</span>
                <span class="zizhiNum">854</span>
            </div>
            <div>
                <span>城市及道路照明工程承包一级</span>
                <span class="zizhiNum">654</span>
            </div>
            <div>
                <span>市政工程审查一类资质</span>
                <span class="zizhiNum">654</span>
            </div>
            <div>
                <span>城市及道路照明工程承包三级</span>
                <span class="zizhiNum">654</span>
            </div>
            <div>
                <span>城市及道路照明工程承包三级</span>
                <span class="zizhiNum">654</span>
            </div>
            <div>
                <span>城市及道路照明工程承包三级</span>
                <span class="zizhiNum">654</span>
            </div>
            <div>
                <span>城市及道路照明工程承包三级</span>
                <span class="zizhiNum">654</span>
            </div>
        </div>
    </div>
</div>
<div class="layui-row">
    <!--左下-->
    <div class="layui-col-xs6 itemBox">
        <!--全省各市项目审查业绩统计图-->
        <div class="barStyle">
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <div class="echartBox cityYj"></div>
                    </div>
                    <div class="swiper-slide">
                        <div class="echartBox cityYj"></div>
                    </div>
                    <div class="swiper-slide">
                        <div class="echartBox cityYj"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--右下-->
    <div class="layui-col-xs6 itemBox">
        <div class="layui-row">
            <!--大数据智能系统-->
            <div class="layui-col-xs6 childItem">
                <p class="titleClass" style="margin:81px 0 0 66px;">
                </p>
                <table style="margin-left:66px;" class="tableClass">
                    <thead>
                    <tr class="trBgBlue">
                        <td>项目类型</td>
                        <td>项目总数</td>
                        <td>已备案数</td>
                    </tr>
                    </thead>
                    <tbody class="typeSummary">
                    <!--<tr>
                        <td>市政岩土勘察</td>
                        <td>100144 个</td>
                        <td>98745 个</td>
                    </tr>
                    <tr class="trBgBlue">
                        <td>市政岩土设计</td>
                        <td>100144 个</td>
                        <td>98745 个</td>
                    </tr>
                    <tr>
                        <td>市政房建工程</td>
                        <td>100144 个</td>
                        <td>98745 个</td>
                    </tr>
                    <tr class="trBgBlue">
                        <td>市政道桥拱城</td>
                        <td>100144 个</td>
                        <td>98745 个</td>
                    </tr>-->
                    </tbody>
                </table>
            </div>
            <!--智能运营系统-->
            <div class="layui-col-xs6 childItem">
                <p class="titleClass" style="margin:81px 0 0 66px;">
                </p>
                <table style="margin-left: 22px;" class="tableClass">
                    <thead>
                    <tr class="trBgBlue">
                        <td>市</td>
                        <td>超时次数</td>
                        <td>超时比率</td>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>石家庄市</td>
                        <td>1</td>
                        <td>25%</td>
                    </tr>
                    <tr class="trBgBlue">
                        <td>唐山市</td>
                        <td>6</td>
                        <td>36%</td>
                    </tr>
                    <tr>
                        <td>保定市</td>
                        <td>4</td>
                        <td>25%</td>
                    </tr>
                    <tr class="trBgBlue">
                        <td>张家口市</td>
                        <td>7</td>
                        <td>30%</td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="layui-row">
            <!--大数据智能系统-->
            <div class="layui-col-xs6 childItem">
                <p class="titleClass" style="margin:81px 0 0 66px;">
                </p>
                <table style="margin-left:66px;" class="tableClass">
                    <thead>
                    <tr class="trBgBlue">
                        <td>审查机构名称</td>
                        <td>遴选次数</td>
                        <td>遴选比率</td>
                    </tr>
                    </thead>
                    <tbody class="selection">
                    <!--<tr>
                        <td>广西安城建设工程咨询有限公司</td>
                        <td>319</td>
                        <td>6.2%</td>
                    </tr>
                    <tr class="trBgBlue">
                        <td>腾图建筑工程技术咨询有限公司</td>
                        <td>319</td>
                        <td>6%</td>
                    </tr>
                    <tr>
                        <td>蓝图建筑施工图审查咨询有限公司</td>
                        <td>313</td>
                        <td>5.3%</td>
                    </tr>
                    <tr class="trBgBlue">
                        <td>广西高建施工图审查有限公司</td>
                        <td>309</td>
                        <td>5.1%</td>
                    </tr>-->
                    </tbody>
                </table>
            </div>
            <!--智能运营系统-->
            <div class="layui-col-xs6 childItem">
                <div id="areaCount" style="margin-top: 45px;" class="echartBox"></div>
            </div>
        </div>
    </div>
</div>
<script src="/static/js/main.js"></script>
<script src="/lib/echarts/echarts-all.js"></script>
<script>
    layui.use(['jquery', 'configureCom', 'configure', 'form', 'jquery', 'sessionFun', 'indexEchartFun'], function () {
        var indexEchartFun = layui.indexEchartFun;
        var configureCom = layui.configureCom;
        var form = layui.form;
        var configure = layui.configure;
        var $ = layui.jquery;
        var swiper = new Swiper('.swiper-container', {
            effect: 'coverflow',
            grabCursor: true,
            centeredSlides: true,
            slidesPerView: 'auto',
            autoplay: 2000,
            loop: true,
            coverflowEffect: {
                rotate: 50,
                stretch: 50,
                depth: 100,
                modifier: 1,
                slideShadows: true
            },
            pagination: {
                el: '.swiper-pagination'
            }
        });
        // 各市强条统计
        indexEchartFun.cityQtInit();
        //各专业强条统计
        indexEchartFun.specQtInit();
        //城市投资统计
        indexEchartFun.cityTzCountInit();
        //全省各市项目审查业绩统计图
        indexEchartFun.cityYjInit();
        //全省建筑面积历年趋势图
        indexEchartFun.areaCountInit();

        //各市项目统计
        //configureCom.getAjax(configure.REPORT_CHECK_REVIEW_STATUS_HTTP).then(function (res) {
        var res = _res;
        var list =res.list.splice(1);
        var html ='';
        $(list).each(function (index, data) {
            html+='<tr class="trBgBlue">\n' +
                '                        <td>'+data.name+'</td>\n' +
                '                        <td>'+data.prjCount+'</td>\n' +
                '                        <td>'+data.recordCount+'</td>\n' +
                '                    </tr>';
        });
        $('.projectsMunicipal').append(html);
        //});

        //各专业强条统计
        //configureCom.getAjax(configure.REPORT_CHECK_CHECK_AREA_BY_SPEC_HTTP).then(function (res) {
        var res = _res1;
        var html = '';
        $(res.list).each(function (index, item) {
            html +=
                '                            <div class="layui-col-xs6" style="margin-top: 8px;">\n' +
                '                                <p>' + item.specName + '</p>\n' +
                '                                <p>' + item.qtCount + '</p>\n' +
                '                            </div>\n';
        });
        $('.professionalStrength').append(html)
        //});

        //全省企业资质统计
        //configureCom.getAjax(configure.REPORT_CHECK_CHECK_APTITUDE_ORG_HTTP).then(function (res) {
        var res = _res3;
        var html ='';
        $(res.list).each(function (index, data) {
            html+='<div>\n' +
                '                <span> '+data.aptitudeName+'</span>\n' +
                '                <span class="zizhiNum">'+data.orgCount+'</span>\n' +
                '            </div>';
        });
        $('.provincialQualifications').append(html);
        var length = res.list.length;
        //全省企业资质统计
        $('.slider_circle_10').EasySlides({
            'autoplay': true,
            'show': length
        });
        //});

        //项目类型数据汇总
        //configureCom.getAjax(configure.REPORT_CHECK_CHECK_PRJ_BY_CATEGORY_HTTP).then(function (res) {
        var res=_res4;
        var html ='';
        $(res.list).each(function (index, data) {
            html+='<tr class="trBgBlue">\n' +
                '                        <td>'+data.prjCategoryValue+'</td>\n' +
                '                        <td>'+data.prjCount+'</td>\n' +
                '                        <td>'+data.recordCount+'</td>\n' +
                '                    </tr>';
        });
        $('.typeSummary').append(html);
        //});

        //各省市遴选统计
        //configureCom.getAjax(configure.REPORT_CHECK_CHECK_SELECT_HTTP).then(function (res) {
        var res = _res5;
        var html ='';
        $(res.list).each(function (index, data) {
            html+='<tr class="trBgBlue">\n' +
                '                        <td>'+data.orgName+'</td>\n' +
                '                        <td>'+data.allSelectedCount+'</td>\n' +
                '                        <td>'+data.qualifiRate+'</td>\n' +
                '                    </tr>';
        });
        $('.selection').append(html);
        //})


    });
</script>
</body>
</html>